<template>
    <div class="newsinfo">
        <div class="title">
            <h2 class="title1">{{list.title}}</h2>
            <p class="subtitle">
                <span class="time">{{list.add_time | dataForm}}</span>
                <span class="cliTime">点击：{{list.click}}次</span>
            </p>
        </div>

        <hr>
        <div class="content" v-html="list.content"></div>
        <!--评论区域-->
        <comment-box class="cmBottom" :id="this.id"></comment-box>

    </div>
</template>

<script type="text/ecmascript-6">
    // 引入评论子组件
    import comment from '../subcomponents/comments.vue'

    export default {
        data() {
            return {
                id: this.$route.params.id,
                list: {}
            }
        },
        created() {
            this.getNewsInfo()
        },
        methods: {
            getNewsInfo() {
                this.$http.get("api/getnew/" + this.id).then(result => {
                    result = result.body
                    if (result.status === 0) {
                        this.list = result.message[0]
                        // console.log(this.list)
                    }
                })
            }
        },
        components:{
            "comment-box":comment
        }

    };

</script>

<style lang="stylus" rel="stylesheet/stylus">
    .newsinfo
        .title1 {
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color: red;
        }
        .subtitle
            padding-left 5px
            padding-right 5px
            display flex
            justify-content space-between
            margin-bottom -10px
            color #226aff
            font-weight normal
        .cliTime{

        }
        .time{

        }
        .content{

            line-height 21px
            padding-left 5px
            padding-right 5px
            font-size 14px
            color #8f8f94
            font-weight normal
            p{
                margin-top: 0;
                margin-bottom: 10px;
                color black
            }
         }
        .cmBottom{
            padding-bottom 50px
            padding-left 5px
            padding-right 5px
        }
</style>